<template>
    <div>
        <!--查询条件-->
        <div>
            <el-row style="margin-top:10px;">
                <el-col :span="20" style="text-align:left;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">

                        <router-link to="/order/add" >添加订单</router-link>

                        <el-button type="danger">批量删除</el-button>
                        <el-form-item label="">
                            <el-input v-model="formInline.user" placeholder="订单编号" style="margin-left:10px;"></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-select v-model="formInline.region" placeholder="订单状态" style="margin-left:10px;">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="eventDisplayHeightSearch">高级查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="4" style="text-align:right;">
                    <el-button><i class="el-icon-download"></i> 导出</el-button>
                </el-col>
            </el-row>
        </div>
        <!--高级查询条件-->
        <div v-show="searchHeightDisplay">
            <el-row style="margin-top:10px;">
                <el-col :span="8">订单编号：<el-input size="medium" style="width:250px;"></el-input> </el-col>
                <el-col :span="8">订单归属：<el-input size="medium" style="width:250px;"></el-input> </el-col>
                <el-col :span="8">销售类型：<el-input size="medium" style="width:250px;"></el-input> </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-col :span="8">订单编号：<el-input size="medium" style="width:250px;"></el-input> </el-col>
                <el-col :span="8">订单归属：<el-input size="medium" style="width:250px;"></el-input> </el-col>
                <el-col :span="8">销售类型：<el-input size="medium" style="width:250px;"></el-input> </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-col :span="8">订单编号：<el-input size="medium" style="width:250px;"></el-input> </el-col>
                <el-col :span="8">订单归属：<el-input size="medium" style="width:250px;"></el-input> </el-col>
                <el-col :span="8">销售类型：<el-input size="medium" style="width:250px;"></el-input> </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-col :span="8">订单编号：<el-input size="medium" style="width:250px;"></el-input> </el-col>
                <el-col :span="8">订单归属：<el-input size="medium" style="width:250px;"></el-input> </el-col>
                <el-col :span="8">销售类型：<el-input size="medium" style="width:250px;"></el-input> </el-col>
            </el-row>
        </div>

        <!--操作按钮-->
        <div>
            <el-row style="margin:10px 0;">
                <el-col :span="12" style="text-align:left;">
                    <el-radio-group v-model="radio3" size="small">
                        <el-radio-button label="全部"></el-radio-button>
                        <el-radio-button label="待付款"></el-radio-button>
                        <el-radio-button label="进行中"></el-radio-button>
                        <el-radio-button label="已完成"></el-radio-button>
                        <el-radio-button label="已关闭"></el-radio-button>
                    </el-radio-group>
                </el-col>
                <el-col :span="12" style="text-align:right;">
                    <el-button size="mini"><i class="el-icon-refresh"></i>刷新</el-button>

                </el-col>
            </el-row>
        </div>


        <!--显示列表-->
        <div>
            <el-table :data="orderData" style="width: 100%">
                <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
                <el-table-column prop="orderTimeLabel" label="下单时间" width="180"></el-table-column>
                <el-table-column prop="orderAmount" label="订单金额" width="180"></el-table-column>
                <el-table-column prop="payAmount" label="实付金额" width="180"></el-table-column>
                <el-table-column prop="name" label="收货人信息" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.recivedName  }} / {{ scope.row.recivedPhone }}
                    </template>
                </el-table-column>
                <el-table-column prop="orderStateLabel" label="订单状态" width="180">

                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <!-- 
                            <router-link :to="'/order/detail?orderNo='+scope.row.orderNo+'&money='">明细</router-link> 
                         -->
                        <router-link :to="{ name: 'order/detail', params: { row: scope.row } }">明细</router-link>
                    </template>

                </el-table-column>
            </el-table>
        </div>


        <!--分页按钮-->
        <div></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderData: [],
            radio1: '上海',
            radio2: '上海',
            radio3: '全部',
            radio4: '上海',
            formInline: {
                user: '',
                region: ''
            },
            searchHeightDisplay: false
        };
    },
    mounted(){
        this.onloadOrderData()
    },
    methods: {

        //加载订单列表
        onloadOrderData(){
            let url='http://localhost:5164/order'
            this.$http.get(url).then(res=>{
                if(res.data.code ==200){
                    this.orderData = res.data.data
                }
            })
        },

        //显示隐藏高级查询条件
        eventDisplayHeightSearch() {
            this.searchHeightDisplay = !this.searchHeightDisplay
        },
    }
}
</script>